﻿@model DAL.Product

@using DAL
@{
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>详情页</title>
    <link rel="stylesheet" type="text/css" href="/css/top.css" />
    <link rel="stylesheet" type="text/css" href="/css/lunbo.css">
    <link rel="stylesheet" type="text/css" href="/css/zhanshi.css">
    <link rel="stylesheet" type="text/css" href="/css/footer.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
  
    <script src="/js/public.js"></script>
    <style>
   
        .my_link_button {
            display: block;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 30px;
            font-size: 12px;
            color: #666;
        }

        .my_link_button_select {
            display: block;
           
            padding-left: 10px;
            padding-right: 10px;
           
            font-size: 12px;
            color: #666;
            background: #0081c2;
            font-size: 12px;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            color: red;
        }
       
       /* .guigemoren+div ul li {
            background-color:red;
        }
        .guigemoren + div ul li {
            background-color: red;
        }
        .guigemoren + div ul li {
            background-color: red;
        }*/
       /* .my_link_button:hover {
            text-decoration: none;
            color: white;
            background: #0081c2
        }*/
    </style>
</head>

<body>
    <!--顶部菜单有改动与首页的不一样，请单独调用-->
    

   
    <div class="dy1">
        <div class="dy2">
            <ul class="dy3">
                <li><a href="#">帝云官网<br />帝云官网</a></li>
                <li><a href="#" id="diyunapp">商城APP<br />商城APP</a></li>
            </ul>
            <a href="#" class="dy5">购物车</a>
            <ul class="dy4">
                <li><a href="/home/login">登录<br />登录</a></li>
                <li><a href="">注册<br />注册</a></li>
            </ul>

            <div class="dy9">
                <img src="/img/phone.png" />
            </div>
        </div>
    </div>
    <!--logo加时间加搜索框-->
    <div class="dy10">
        <div class="dy11">
            <img src="/img/logo.png" />
        </div>
        <div class="dy13">
            <embed src="/img/honehone_clock_wh.swf" style=" height:45px; width:120px"></embed>
        </div>
        
    </div>

    <script src="js/daohang.js"></script>
    <!--你当前位置 -->
    <div class="nowweizhi">
        
        <a href="/Home/Index">返回主页</a>
        <b>></b>
        <a href="#">@Model.ShopName</a>
    </div>
    <!--商品展示区域-->
    <div class="theshopshow">
        <!--left-->
        <!-- 帝云商品展示 -->
        <script src="js/163css.js"></script>
        <script src="js/lib.js"></script>
        <div id="preview">
            <div class=jqzoom id="spec-n1" onClick="window.open('/')">
                <IMG height="350" id="img_ys" src="@Model.ProductJianJieImgUrl" jqimg="img/img04.jpg" width="350">
            </div>
            <div id="spec-n5">
                <div class=control id="spec-left">
                    <img src="/img/left.gif" />
                </div>
                <div id="spec-list">
                    <ul class="list-h">
                        <li><img src="@Model.ProductImgDetailUrl"> </li>
                        <li><img src="@Model.ProductJianJieImgUrl"> </li>
                        <li><img src="@Model.ProductJianJieImgUrl"> </li>
                        <li><img src="@Model.ProductImgDetailUrl"> </li>
                        <li><img src="@Model.ProductJianJieImgUrl"> </li>
                        <li><img src="@Model.ProductJianJieImgUrl"> </li>
                    </ul>
                </div>
                <div class=control id="spec-right">
                    <img src="/img/right.gif" />
                </div>
            </div>
        </div>
        <!-- 帝云商品展示 End -->
        <!--right-->
        <div class="shoppnum">
            <!--n1-->
            <div class="shanpmai">
                <h1 class="spdname">@Model.ShopName</h1>
                <div class="hotspeak">
                    全场免邮，满200-20,400-40，支持货到付款
                </div>
                <div class="shoujiap">
                    <span>商城价格</span>
                    <i >@Model.Price</i>￥
                </div>
              
                <!--<div class="peisongzhi">
                    <span>配送至</span>

                    <div class="choosecity">
                        <input type="text" id="city" value="" placeholder="输入你的地址" style=" height:25px; font-size:12px; margin-top:5px; border:1px solid #cacace">-->
                   
                           @*<label class="lib">选择框</label>
                            <select class="sel">
                                <option class="opti">2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>*@
                     
                    <!--</div>-->
                </div>
                <div class="xuanzcolor">

                    <div class="choosecm">
                        @foreach (var item in ViewBag.guige)
                        {
                            <span class="guigemoren">@item.GuiGeName</span>
                            foreach (var iem in ViewBag.guigezhi)
                            {
                                <div class="morecm"  >
                                    <ul >
   
                                        @if (iem.GuiGeId == item.Id)
                                        {
                                            <li >  <a href="#" onclick="gu(@iem.Id,@iem.GuiGeId)" id="@iem.Id" name="mylink" class="my_link_button@(iem.GuiGeId)" style=" display: block; padding-left: 10px; padding-right: 10px; line-height: 30px; font-size: 12px; color: #666;">@iem.GuiGeZhiName</a></li>
                                           
                                        }
                                    </ul>
                                </div>
                            }
                            <br />
                            <br />
                        }
                    </div>
                    <!--购买数量-->
                    <div class="goumaijiajian">
                        <span>购买数量</span>
                        <input id="minsum" name="" type="button" value="减" style=" width:30px; height:30px; font-size:12px; line-height:30px; color:#333; float:left; cursor:pointer">
                        <input id="sum" name="" type="text" value="1" style="width:60px;height:30px; font-size:12px; text-align:center; float:left" />
                        <input id="addsum" name="" type="button" value="加"  style=" width:30px; height:30px; font-size:12px; line-height:30px; color:#333; float:left; cursor:pointer">
                    </div>

                    <!--加入购物车与收藏商品-->
                    <div class="joinspadsp">
                        <a href="#" style=" margin-left:67px" id="Buynow">立即购买</a>
                        <a href="#" style=" margin-left:6px">加入购物车</a>
                        <a href="#" style=" margin-left:6px">收藏该商品</a>
                    </div>
                    <!--商品编号-->
                    <div class="shopbh">
                        <span>商品编号</span>
                        <em>123456789</em>
                    </div>
                </div>
            <!--n2-->
        </div>
        <script>
            $("#addsum").click(function () {
                var sum = $("#sum").val();
                if (sum >=50) {
                    alert("一次最多买五十台哦");
                    return false;
                } else {
                    sum++;
                    $("#sum").val(sum); 
                    var price = sum *@Model.Price;

                    $("#ibq").val = price;
                }
            });
            $("#minsum").click(function () {
                var sum = $("#sum").val();
                if (sum <= 1) {
                    return false;
                } else {
                    sum--;
                    $("#sum").val(sum);
                }
            });

            function gu(res,guige) {


                var classname = "my_link_button" + guige;
                var x = document.getElementsByClassName(classname);
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].style.color = "black";
                    x[i].style.backgroundColor = "white";
                }
                document.getElementById(res).style.backgroundColor = "red";
                
              
            }
            var zhiiid = 0;
            var zhi = 0;
            var arrzhiid = new Array();
            var arrzhi = new Array();
            function GetColor() {
                $("a").each(function (i, val) {

                    co = $(this).css('background-color');
                    
                    
                    if (co == "rgb(255, 0, 0)") {
                        var zhiid = this.id;
                        arrzhiid[zhiiid] = zhiid;
                        arrzhi[zhi] = this.innerText;
                        zhiiid++;
                        zhi++;
                    }
                   
                });
               
            }
           
            $("#Buynow").click(function () {
                GetColor();
                var str = arrzhiid.join('');
                zhi = 0;
                zhiiid = 0;
                var summ = $("#sum").val();
                window.location.href = "/ShopDetail/SubmintOrder?id=" + str + "" + "&sum=" + summ;
                //$.ajax({
                //    type: "post",
                //    url: "/ShopDetail/SubmintOrder",
                //    data: { zhi: arrzhi, zhiid: arrzhiid, str: str },
                //    dataType: "json",
                   
                //});
            });
           
        </script>
</body>
</html>